<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>One 搬运站</title>
    {% include "./iosMeta.html" %}
    {% include "../components/importVue.html" %}
    {% include "../components/importVant.html" %}
    <link
        rel="stylesheet"
        href="/public/oneisall/index.s.css"
    />
    <style>
        #app {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <van-tabs class="tabs" v-model:active="active">
            <van-tab v-for="item in tabs" :title="item.label"></van-tab>
        </van-tabs>
        <div class="index" v-show="active === 0">
            <div class="vol">Vol.@{ vol }</div>
            <div class="text">@{ text }</div>
            <img class="image" :src="image" alt="index image">
            <div class="copyright">
                <hr/>
                <div>本站内容均从  <a href="https://www.wufazhuce.com" target="_blank">「一个」</a> 搬运而来，如有侵权，请 <a href="mailto:xt@thebestxt.cc" target="_blank">联系删除</a> 。</div>
                <div class="fp-one-app">
                    <p>每天只为你准备一张图片、一篇文字和一个问答<br>
                    韩寒主编和监制 原《独唱团》主创成员共同制作</p>
                    <p class="qrcode">
                        <img src="https://image.wufazhuce.com/www-one-app_qrcode.png">
                        <img src="https://image.wufazhuce.com/www-one-wx_qrcode.png">
                    </p>
                
                    <div>- 也可搜索 -</div>
                    <div>"韩寒一个" 或 "ONE一个"</div>
                </div>
            </div>
        </div>
        <div class="article" v-show="active === 1">
            <div class="title">@{ article_title }</div>
            <div class="author">@{ article_author }</div>
            <div class="content" v-html="article_content"></div>
        </div>
        <div class="question" v-show="active === 2">
            <div class="title">@{ question_title }</div>
            <div class="content" v-html="question_content"></div>
        </div>
        <div class="more" v-show="active === 3">
            {% include "./OldVolsComponent.html" %}
        </div>
    </div>
    <script>
        const { createApp, ref, onMounted, computed } = Vue

        const app = createApp({
            setup() {
                const active = ref('index')
                const tabs = ref([
                    {
                        key: 'index',
                        label: '{{ ymd }}'
                    },
                    {
                        key: 'article',
                        label: '文章'
                    },
                    {
                        key: 'question',
                        label: '问题'
                    },
                    {
                        key: 'more',
                        label: '往期'
                    }
                ])

                const ymd = ref('{{ ymd }}')
                const image = ref('{{ image }}')
                const text = ref('{{ text }}')
                const vol = ref('{{ vol }}')
                const article_title = ref('{{ article_title }}')
                const article_author = ref('{{ article_author }}')
                const article_content = ref(`{{ article_content | safe }}`)
                const question_title = ref('{{ question_title }}')
                const question_content = ref(`{{ question_content | safe }}`)
                const ymdList = ref(JSON.parse('{{ ymdListJson | safe }}'))

                onMounted(() => {
                    document.getElementById('app').style.display = 'block'
                })

                return {
                    active,
                    tabs,
                    ymd,
                    image,
                    text,
                    vol,
                    article_title,
                    article_author,
                    article_content,
                    question_title,
                    question_content,
                    ymdList
                }
            }
        })
        
        app.config.compilerOptions.delimiters = ['@{', '}']
        
        app.use(vant)
        app.use(vant.Lazyload)
        app.mount('#app')
    </script>
</body>
</html>
